M
MLOG
Deduplikasi Sumber Daya React Suspense: Mencegah Permintaan Duplikat | MLOG | MLOG

Sekarang, UserResource akan memeriksa apakah sumber daya sudah ada di dalam cache. Jika ya, sumber daya yang di-cache akan dikembalikan. Jika tidak, permintaan baru akan dimulai, dan promise yang dihasilkan akan disimpan di dalam cache. Ini memastikan bahwa hanya satu permintaan yang dibuat untuk setiap userId yang unik.

2. Menggunakan Library Caching Khusus (misalnya, `lru-cache`)

Untuk skenario caching yang lebih kompleks, pertimbangkan untuk menggunakan library caching khusus seperti lru-cache atau sejenisnya. Library ini menyediakan fitur seperti penghapusan cache berdasarkan Least Recently Used (LRU) atau kebijakan lain, yang bisa sangat penting untuk mengelola penggunaan memori, terutama saat berhadapan dengan sejumlah besar sumber daya.

Pertama, instal library:

            
npm install lru-cache

Kemudian, integrasikan ke dalam UserResource Anda:

            
import React, { Suspense } from 'react';
import LRUCache from 'lru-cache';

const fetchUser = (userId) => {
  console.log(`Mengambil pengguna dengan ID: ${userId}`); // Simulasi permintaan jaringan
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ id: userId, name: `Pengguna ${userId}`, email: `user${userId}@example.com` });
    }, 1000); // Simulasi latensi jaringan
  });
};

const cache = new LRUCache({
  max: 100, // Jumlah maksimum item dalam cache
  ttl: 60000, // Waktu hidup dalam milidetik (1 menit)
});

const UserResource = (userId) => {
  if (!cache.has(userId)) {
    let promise = null;
    let status = 'pending'; // pending, success, error
    let result;

    const suspender = fetchUser(userId).then(
      (r) => {
        status = 'success';
        result = r;
        cache.set(userId, {
          read() {
            return result;
          },
        });
      },
      (e) => {
        status = 'error';
        result = e;
        cache.set(userId, {
          read() {
            throw result;
          },
        });
      }
    );

    cache.set(userId, {
        read() {
            if (status === 'pending') {
                throw suspender;
            } else if (status === 'error') {
                throw result;
            }
            return result;
        }
    });
  }

  return cache.get(userId);
};


const UserProfile = ({ userId }) => {
  const user = UserResource(userId).read();
  return (
    

      
Profil Pengguna

      
ID: {user.id}

      
Nama: {user.name}

      
Email: {user.email}

    

  );
};

const UserDetails = ({ userId }) => {
  const user = UserResource(userId).read();
  return (
    

      
Detail Pengguna

      
ID: {user.id}

      
Nama: {user.name}

    

  );
};

const App = () => {
  return (
    Memuat...
}> ); }; export default App;

Pendekatan ini memberikan lebih banyak kontrol atas ukuran dan kebijakan kedaluwarsa cache.

3. Menggabungkan Permintaan (Request Coalescing) dengan Library seperti `axios-extensions`

Library seperti axios-extensions menawarkan fitur yang lebih canggih seperti request coalescing. Request coalescing menggabungkan beberapa permintaan identik menjadi satu permintaan tunggal, yang lebih lanjut mengoptimalkan penggunaan jaringan. Ini sangat berguna dalam skenario di mana permintaan dimulai sangat berdekatan dalam waktu.

Pertama, instal library:

            
npm install axios axios-extensions

Kemudian, konfigurasikan Axios dengan adapter cache yang disediakan oleh axios-extensions.

Contoh penggunaan `axios-extensions` dan membuat sumber daya:

            
import React, { Suspense } from 'react';
import axios from 'axios';
import { cacheAdapterEnhancer, throttleAdapterEnhancer } from 'axios-extensions';

const instance = axios.create({
  baseURL: 'https://api.example.com', // Ganti dengan endpoint API Anda
  adapter: cacheAdapterEnhancer(axios.defaults.adapter, { enabledByDefault: true }),
});

const fetchUser = async (userId) => {
  console.log(`Mengambil pengguna dengan ID: ${userId}`); // Simulasi permintaan jaringan
  const response = await instance.get(`/users/${userId}`);
  return response.data;
};


const UserResource = (userId) => {
    let promise = null;
    let status = 'pending'; // pending, success, error
    let result;

    const suspender = fetchUser(userId).then(
        (r) => {
            status = 'success';
            result = r;
        },
        (e) => {
            status = 'error';
            result = e;
        }
    );

    return {
        read() {
            if (status === 'pending') {
                throw suspender;
            } else if (status === 'error') {
                throw result;
            }
            return result;
        },
    };
};


const UserProfile = ({ userId }) => {
  const user = UserResource(userId).read();
  return (
    

      
Profil Pengguna

      
ID: {user.id}

      
Nama: {user.name}

      
Email: {user.email}

    

  );
};

const UserDetails = ({ userId }) => {
  const user = UserResource(userId).read();
  return (
    

      
Detail Pengguna

      
ID: {user.id}

      
Nama: {user.name}

    

  );
};

const App = () => {
  return (
    Memuat...
}> ); }; export default App;

Ini mengonfigurasi Axios untuk menggunakan adapter cache, secara otomatis menyimpan respons dalam cache berdasarkan konfigurasi permintaan. Fungsi cacheAdapterEnhancer menyediakan opsi untuk mengonfigurasi cache, seperti menetapkan ukuran cache maksimum atau waktu kedaluwarsa. throttleAdapterEnhancer juga dapat digunakan untuk membatasi jumlah permintaan yang dibuat ke server dalam periode waktu tertentu, yang lebih lanjut mengoptimalkan performa.

Praktik Terbaik untuk Deduplikasi Sumber Daya

Pertimbangan Global untuk Pengambilan Data dan Deduplikasi

Saat merancang strategi pengambilan data untuk audiens global, beberapa faktor ikut berperan:

Sebagai contoh, situs web pemesanan perjalanan yang menargetkan audiens global mungkin menggunakan CDN untuk menyajikan data ketersediaan penerbangan dan hotel dari server yang berlokasi di berbagai wilayah. Situs web tersebut juga akan menggunakan API konversi mata uang untuk menampilkan harga dalam mata uang lokal pengguna dan menyediakan opsi untuk memfilter hasil pencarian berdasarkan preferensi bahasa.

Kesimpulan

Deduplikasi sumber daya adalah teknik optimasi penting untuk aplikasi React yang menggunakan Suspense. Dengan mencegah permintaan pengambilan data duplikat, Anda dapat secara signifikan meningkatkan performa, mengurangi beban server, dan meningkatkan pengalaman pengguna. Baik Anda memilih untuk mengimplementasikan cache promise sederhana atau memanfaatkan library yang lebih canggih seperti lru-cache atau axios-extensions, kuncinya adalah memahami prinsip-prinsip yang mendasarinya dan memilih solusi yang paling sesuai dengan kebutuhan spesifik Anda. Ingatlah untuk mempertimbangkan faktor-faktor global seperti CDN, lokalisasi, dan aksesibilitas saat merancang strategi pengambilan data Anda untuk audiens yang beragam. Dengan menerapkan praktik terbaik ini, Anda dapat membangun aplikasi React yang lebih cepat, lebih efisien, dan lebih ramah pengguna.